<!-- subpkg_medicine/payment/index.vue -->
<script setup>
	import { ref } from 'vue'
	// 导入 订单-查询收货地址列表
	import { addressListApi } from '@/services/address.js'
	// 带入 药品订单-支付药款页面-根据处方信息计算药款
	import { preOrderApi, createOrderApi } from '@/services/medicine.js'
	import { orderPayApi } from '@/services/payment.js'
	// 接收外部数据
	const props = defineProps({
		id: String,
	})

	// 预付订单信息
	const preOrderInfo = ref({})
	// 收货地址信息
	const addressInfo = ref({})
	// 用户收货地址
	async function getAddressList() {
		// 地址列表接口
		const { code, data, message } = await addressListApi()
		// 检测接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)
		// 数据调整
		data[0].addressDetail = data[0].addressDetail.replace(data[0].city, '')
		// 渲染地址列表数据
		addressInfo.value = data[0]
	}
	// 药品预付订单
	async function createPreOrder() {
		if (!props.id) return
		// 预付订单接口
		const { code, data, message } = await preOrderApi(props.id)
		console.log(data)
		// 检测接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)
		// 渲染预付订单信息
		preOrderInfo.value = data
	}
	// 调用接口
	createPreOrder()
	getAddressList()
	// 待支付订单ID
	const orderId = ref('')
	// 支付渠道组件实例
	const paymentRef = ref()

	// 关闭支付渠道弹层
	function onPaymentClose() {
		paymentRef.value.close()
	}

	// 支付渠道确认支付
	async function onPaymentConfirm({ index }) {
		if (index === 0) return uni.utils.toast('暂不支持微信支付!')
		// 调用后端提供的支付接口
		const { code, data, message } = await orderPayApi({
			orderId: orderId.value,
			paymentMethod: index,
			payCallback:
				'http://localhost:5173/#/subpkg_medicine/pay_result/index',
		})
		// 接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)
		// 支付宝支付页面
		window.location.href = data.payUrl
	}

	// 选择支付渠道
	async function onPaymentButtonClick() {
		// 生成待支付订单接口
		const { code, data, message } = await createOrderApi(
			props.id,
			addressInfo.value.id
		)
		// 检测接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)
		// 传递订单ID
		orderId.value = data.id
		// 打开支付渠道
		paymentRef.value.open()
		console.log(orderId.value)
	}
</script>

<template>
	<scroll-page background-color="#f6f6f6">
		<view class="medicine-page">
			<view class="page-header">
				<view class="order-shippment">
					<view class="region">
						<uni-icons
							size="16"
							color="#FF7702"
							type="location-filled"
						/>
						{{ addressInfo.province }} {{ addressInfo.city }}
					</view>
					<view class="detail">{{ addressInfo.addressDetail }}</view>
					<view class="receiver">
						{{ addressInfo.receiver }} {{ addressInfo.mobile }}
					</view>
				</view>
			</view>

			<view class="order-shop">
				优医药房
				<text class="alt">优医质保 假一赔十</text>
			</view>
			<!-- 药品列表 -->
			<view class="medicine-list">
				<view
					v-for="medicine in preOrderInfo.medicines"
					:key="medicine.id"
					class="medicine-list-item"
				>
					<image
						class="medicine-cover"
						:src="medicine.avatar"
						mode="aspectFill"
					/>
					<view class="medicine-info">
						<text class="name">{{ medicine.name }}</text>
						<text
							:class="{ symbol: medicine.prescriptionFlag === 1 }"
							class="symbol"
						>
							{{ medicine.specs }}
						</text>
						<text class="price">¥{{ medicine.amount }}</text>
					</view>
					<view class="quantity">x{{ medicine.quantity }}</view>
					<view class="guide"
						>用法用量：{{ medicine.usageDosag }}</view
					>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order-info">
				<uni-list :border="false">
					<uni-list-item
						title="药品金额"
						:right-text="'¥' + preOrderInfo.payment"
					/>
					<uni-list-item
						title="运费"
						:right-text="'¥' + preOrderInfo.expressFee"
					/>
					<uni-list-item
						title="优惠券"
						show-arrow
						:right-text="'-¥' + preOrderInfo.couponDeduction"
					/>
					<uni-list-item
						title="实付款"
						:right-text="'¥' + preOrderInfo.actualPayment"
					/>
				</uni-list>
			</view>

			<!-- 底部 -->
			<view class="toolbar">
				<view class="total-amount">
					需付款:
					<text class="number"
						>¥{{ preOrderInfo.actualPayment }}</text
					>
				</view>
				<view class="buttons">
					<button class="uni-button" @click="onPaymentButtonClick">
						立即支付
					</button>
				</view>
			</view>
		</view>
	</scroll-page>

	<custom-payment
		@close="onPaymentClose"
		@confirm="onPaymentConfirm"
		:amount="preOrderInfo.actualPayment"
		:order-id="orderId"
		ref="paymentRef"
	/>
</template>

<style lang="scss">
	@import './index.scss';
</style>
